import React, { Component } from 'react';
import { Table, Pagination, Tooltip } from 'antd';
import moment from 'moment';

class UnavaliabledTable extends Component {
  render() {
    const columns = [{
      title: 'No.',
      render: (text, record) => {
        return (
          <div>{record.id}</div>
        )
      }
    }, {
      title: 'Title',
      width: 180,
      render: (record) => {
        return (
          <Tooltip title={record.title}>
            <div className="title-name">{record.advertisementTitle}</div>
          </Tooltip>
        )
      }
    }, {
      title: 'Category',
      render: (text, record) => {
        return (
          <div className="">
            {
              record.categories.map((item, index) => {
                return (item.name)
              })
            }
          </div>
        )
      }
    }, {
      title: 'Publisher',
      dataIndex: 'advertisementPublisher',
    }, {
      title: 'Condition',
      render: (text, record) => {
        return (
          <div>
            { record.advertisementCondition === 'cn' ? 'Chinese' : 'English' }
          </div>
        )
      }
    }, {
      title: 'Ad.Type',
      render: (text, record) => {
        return (
          <div>
            { record.advertisementType === 101 ? 'Image' : 'Article' }
          </div>
        )
      }
    }, {
      title: 'Available Time',
      render: (text, record) => {
        return (
          <div>
            <div>
              {
                record.advertisementStatisticsResult.startTime ?
                moment(record.advertisementStatisticsResult.startTime).format('YYYY-MM-DD MM:ss') : null
              }
            </div>
            <div>
              {
                record.advertisementStatisticsResult.endTime ?
                moment(record.advertisementStatisticsResult.endTime).format('YYYY-MM-DD MM:ss') : null
              }
            </div>
          </div>
        )
      }
    }, {
      title: 'Add Time',
      render: (text, record) => {
        return (
          <div>{moment(record.gmtCreate).format('YYYY-MM-DD MM:ss')}</div>
        )
      }
    }, {
      title: 'Operation',
      render: (record) => {
        return (
          <div className="edit-config">
            <span className="edit-text" onClick={() => this.props.toEdit(record.id)}>Edit</span>
            <span className="edit-text" onClick={() => this.props.remove(record.id, record.advertisementType)}>Remove</span>
          </div>
        )
      }
    }];

    return (
      <div className="">
        <Table
          rowKey="id"
          className="select-table"
          rowSelection={this.props.rowSelection}
          dataSource={this.props.dataSource}
          columns={columns}
          pagination={false} />
        <Pagination
          className="tr mt10"
          showQuickJumper
          showSizeChanger
          showTotal={total => `Total ${total}`}
          total={this.props.dataTotal}
          onChange={this.props.pageOnChange}
          onShowSizeChange={this.props.pageSizeOnChange}
          current={this.props.pageCurrent} />
      </div>
    )
  }
}

export default UnavaliabledTable;
